<!-- <template>
  <div id="app">
    <router-view />
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #ffffff;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style> -->

<template>
  <div id="app">
    <div v-if="isLogin">
      <el-container>
        <el-header style="justify-content: space-between">
          <div class="flex">
            <img
              src="http://www.jixuantian.com/skin/public/home/shopHome/images/logo.png"
              alt=""
              class="company_logo"
            />
            <div class="company_title">无线测温监测系统</div>
          </div>

          <div class="flex">
            <div>
              <div class="flex" style="justify-content: flex-start">
                <el-dropdown>
                  <el-badge :value="100" class="item" :max="4">
                    <img
                      src="./assets/submenu/message.png"
                      alt=""
                      class="message"
                    />
                  </el-badge>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item divided>我是第一条消息</el-dropdown-item>
                    <el-dropdown-item divided>我是第二条消息</el-dropdown-item>
                    <el-dropdown-item divided>我是第三条消息</el-dropdown-item>
                    <el-dropdown-item divided>我是第四条消息</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <div class="flex" style="margin: 0 30px">
                  <i class="el-icon-user-solid"></i>
                  <el-dropdown @command="handleCommand">
                    <div style="margin: 0 5px; color: #fff; cursor: pointer">
                      admin
                    </div>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item divided command="logout"
                        >退出登录</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </el-dropdown>
                  <i class="el-icon-arrow-down"></i>
                </div>
              </div>
              <div style="font-size: 14px">{{ nowDate }}</div>
            </div>
            <img
              src="./assets/icon/quanping.png"
              alt=""
              @click="fullscreenHandle"
              style="
                width: 40px;
                height: 40px;
                cursor: pointer;
                margin-left: 20px;
              "
            />
          </div>
        </el-header>
        <el-container>
          <el-aside width="10vw">
            <!-- <el-menu router :default-active="this.$route.path">
              <el-submenu index="1">
                <template slot="title">
                  <img
                    src="./assets/submenu/能源管理.png"
                    alt=""
                    class="submenu_icon"
                  />
                  能源管理</template
                >
              </el-submenu>

              <el-submenu index="2">
                <template slot="title">
                  <img
                    src="./assets/submenu/碳排管理.png"
                    alt=""
                    class="submenu_icon"
                  />
                  碳排管理</template
                >
              </el-submenu>

              <el-submenu index="3">
                <template slot="title">
                  <img
                    src="./assets/submenu/配电监控.png"
                    alt=""
                    class="submenu_icon"
                  />
                  配电监控</template
                >
                <el-menu-item-group>
                  <el-menu-item index="/dynamicEnvironment"
                    >动力环境</el-menu-item
                  >
                  <el-menu-item index="/loopMonitoring">回路监控</el-menu-item>
                  <el-menu-item index="/powerSupplyDistributionEquipment"
                    >供配电设备</el-menu-item
                  >
                  <el-menu-item index="/networkTopology">网络拓扑</el-menu-item>
                  <el-menu-item index="3-5">历史曲线</el-menu-item>
                  <el-menu-item index="/runReport">运行报表</el-menu-item>
                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="4">
                <template slot="title">
                  <img
                    src="./assets/submenu/电能质量.png"
                    alt=""
                    class="submenu_icon"
                  />
                  电能质量</template
                >
                <el-menu-item-group>
                  <el-menu-item index="4-1">信息概览</el-menu-item>
                  <el-menu-item index="/threePhaseUnbalance"
                    >三相不平衡</el-menu-item
                  >
                  <el-menu-item index="4-3">谐波</el-menu-item>
                  <el-menu-item index="4-4">暂态&瞬态</el-menu-item>
                  <el-menu-item index="4-5">供电偏差</el-menu-item>
                  <el-menu-item index="4-6">电压波动</el-menu-item>
                  <el-menu-item index="4-7">电压闪变</el-menu-item>
                  <el-menu-item index="4-8">时间查询</el-menu-item>
                  <el-menu-item index="4-9">基础参量</el-menu-item>
                  <el-menu-item index="4-10">评估报告</el-menu-item>
                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="5">
                <template slot="title">
                  <img
                    src="./assets/submenu/设备监控.png"
                    alt=""
                    class="submenu_icon"
                  />
                  设备监控</template
                >
              </el-submenu>

              <el-submenu index="6">
                <template slot="title">
                  <img
                    src="./assets/submenu/负荷调控.png"
                    alt=""
                    class="submenu_icon"
                  />
                  负荷调控</template
                >
              </el-submenu>

              <el-submenu index="7">
                <template slot="title">
                  <img
                    src="./assets/submenu/微网系统.png"
                    alt=""
                    class="submenu_icon"
                  />
                  微网系统</template
                >
              </el-submenu>

              <el-submenu index="8">
                <template slot="title">
                  <img
                    src="./assets/submenu/设备运维.png"
                    alt=""
                    class="submenu_icon"
                  />
                  设备运维</template
                >
                <el-menu-item-group>
                  <el-menu-item index="/equipmentAccount"
                    >设备台账</el-menu-item
                  >
                  <el-menu-item index="8-2">设备维修</el-menu-item>
                  <el-menu-item index="8-3">设备保养</el-menu-item>
                  <el-menu-item index="8-4">设备巡检</el-menu-item>
                  <el-menu-item index="8-5">绩效考核</el-menu-item>
                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="9">
                <template slot="title">
                  <img
                    src="./assets/submenu/历史查询.png"
                    alt=""
                    class="submenu_icon"
                  />
                  历史查询</template
                >
                <el-menu-item-group>
                  <el-menu-item index="/telemetryCurveQuery"
                    >遥测曲线查询</el-menu-item
                  >
                  <el-menu-item index="9-2">能耗查询</el-menu-item>
                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="10">
                <template slot="title">
                  <img
                    src="./assets/submenu/运行报表.png"
                    alt=""
                    class="submenu_icon"
                  />
                  运行报表</template
                >
              </el-submenu>

              <el-submenu index="11">
                <template slot="title">
                  <img
                    src="./assets/submenu/综合告警.png"
                    alt=""
                    class="submenu_icon"
                  />
                  综合告警</template
                >
                <el-menu-item-group>
                  <el-menu-item index="/historicalAlarm">历史告警</el-menu-item>
                  <el-menu-item index="11-2">告警推图</el-menu-item>
                  <el-menu-item index="11-3">事故记忆查询</el-menu-item>
                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="12">
                <template slot="title">
                  <img
                    src="./assets/submenu/系统管理.png"
                    alt=""
                    class="submenu_icon"
                  />
                  系统管理</template
                >
                <el-menu-item-group>
                  <el-menu-item index="12-1">日志管理</el-menu-item>
                  <el-menu-item index="12-2">仪表管理</el-menu-item>
                  <el-menu-item index="/alarmConfiguration"
                    >告警配置</el-menu-item
                  >
                  <el-menu-item index="12-4">门户大屏</el-menu-item>
                  <el-menu-item index="/manualEntry">人工录入</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu> -->

            <el-menu router :default-active="this.$route.path">
              <div v-for="(item, index) in menuList" :key="index">
                <el-submenu :index="String(index)">
                  <template slot="title">
                    <img :src="item.icon" alt="" class="submenu_icon" />
                    {{ item.title }}</template
                  >
                  <el-menu-item-group v-if="item.children.length > 0">
                    <div v-for="(item1, index1) in item.children" :key="index1">
                      <el-menu-item :index="item1.url">{{
                        item1.title
                      }}</el-menu-item>
                    </div>
                  </el-menu-item-group>
                </el-submenu>
              </div>
            </el-menu>
          </el-aside>

          <el-container>
            <el-main>
              <router-view></router-view>
            </el-main>
            <!-- <el-footer>Footer</el-footer> -->
          </el-container>
        </el-container>
      </el-container>
    </div>
    <div v-if="!isLogin">
      <div class="login_page">
        <div class="flex3">
          <div class="flex">
            <img
              src="http://www.jixuantian.com/skin/public/home/shopHome/images/logo.png"
              alt=""
              class="company_logo"
            />
            <h1>无线测温监测系统</h1>
          </div>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="账号" style="margin-top: 20px">
              <el-input
                v-model="form.name"
                placeholder="请输入您的账号"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" style="margin-top: 20px">
              <el-input
                v-model="form.psword"
                type="password"
                placeholder="请输入您的密码"
              ></el-input>
            </el-form-item>
            <el-form-item label="验证码" style="margin-top: 20px">
              <div class="flex">
                <el-input
                  v-model="form.code"
                  placeholder="请输入正确的验证码"
                ></el-input>
                <div style="line-height: 10px">
                  <img-verify-com ref="verifyRef" />
                </div>
              </div>
            </el-form-item>
          </el-form>
          <el-button type="primary" style="width: 400px" @click="onLogin"
            >登录</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script scoped>
// this.$refs.verifyRef.imgCode // 获取生成的code （与 用户输入的值对比）

import screenfull from "screenfull";
import imgVerifyCom from "@/components/MyImgVerify"; //导入子组件
export default {
  components: { imgVerifyCom }, //注册子组件
  data() {
    return {
      nowDate: "",
      isLogin: false,
      form: {
        name: "",
        psword: "",
        code: "",
      },
      menuList: [],
    };
  },
  methods: {
    handleCommand(e) {
      if (e == "logout") {
        this.isLogin = false;
        sessionStorage.removeItem("isLogin");
      }
    },
    onLogin() {
      this.isLogin = true;
      sessionStorage.setItem("isLogin", 1);
    },
    // 定义全屏方法，通过按钮点击触发
    fullscreenHandle() {
      const element = document.getElementById("echart_img"); // 指定元素进入全屏模式
      // if (!screenfull.enabled)
      //   return this.$message.info("您的浏览器不支持全屏");
      screenfull.request(element); // 开启全屏
      screenfull.toggle(); // 退出全屏
    },
    // onMenuItem(e) {
    //   this.$router.push(e);
    // },
    getDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.nowDate = `${year}年${month}月${day}日 ${hour}时${minute}分${second}秒 ${weekArr[week]}`;
      // console.log(this.nowDate);
    },
    currentTime() {
      setInterval(() => {
        this.getDate();
      }, 1000);
    },
    getMenu() {
      this.$axios.get("http://localhost:3000/api/getMenu").then(
        (res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.menuList = res.data.data;
          }
        },
        (error) => {
          console.log(error);
        }
      );
    },
  },
  mounted() {
    console.log(sessionStorage.getItem("isLogin"));
    if (sessionStorage.getItem("isLogin") == 1) {
      this.isLogin = true;
    } else {
      this.isLogin = false;
    }
    this.currentTime();
    this.getMenu();
  },
};
</script>

<style>
.el-form-item__label {
  text-align: left !important;
  color: #fff !important;
  font-size: 18px;
}

.login_page {
  background: linear-gradient(
    to right,
    rgb(14, 29, 52),
    rgb(1, 57, 91)
  ) !important;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
  margin: 0 !important;
}

/* 修改滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-button {
  display: none;
}
::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-track-piece {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(144, 147, 153, 0.3);
  cursor: pointer;
  border-radius: 4px;
}

::-webkit-scrollbar-corner {
  display: none;
}

::-webkit-resizer {
  display: none;
}
/* 修改滚动条样式 */

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #ffffff !important;
}

.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex1 {
  display: flex;
  flex-direction: row;
}

.flex2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.flex3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.el-container {
  background: linear-gradient(
    to right,
    rgb(14, 29, 52),
    rgb(1, 57, 91)
  ) !important;
  height: 92vh;
}

.el-menu {
  background: rgb(14, 29, 52);
  color: #fff !important;
  border-right: 1px solid rgb(37, 57, 81) !important;
  border-top: 1px solid rgb(37, 57, 81) !important;
}

.el-header {
  height: 8vh !important;
  display: flex;
  align-items: center;
}

.el-aside {
  /* height: 93vh; */
}

.el-submenu__title,
.el-menu-item {
  color: #ffffff;
}

.el-submenu {
  border-bottom: 1px solid rgb(37, 57, 81) !important;
}

.el-menu-item.is-active {
  background-color: rgb(25, 110, 227);
  color: #ffffff;
}

/* .el-submenu:hover {
  background-color: rgb(25, 110, 227) !important;
  color: #ffffff;
} */

/* .el-footer {
  height: 10vh;
  display: flex;
  align-items: center;
} */

.submenu_icon {
  width: 18px;
  height: 18px;
  margin: 0 2px;
}

.company_logo {
  width: 144px;
  height: 44px;
}

.company_title {
  font-weight: 400;
  font-size: 25px;
  letter-spacing: 4px;
  margin-left: 10px;
}

.el-submenu__title:focus,
.el-submenu__title:hover {
  outline: 0 !important;
  background-color: rgb(25, 110, 227) !important;
  color: #ffffff !important;
}

.el-menu-item:focus,
.el-menu-item:hover {
  outline: 0 !important;
  background-color: rgb(25, 110, 227) !important;
  color: #ffffff !important;
}

.message {
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.el-badge__content {
  background-color: #f56c6c;
  border-radius: 10px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  height: 14px;
  line-height: 14px;
  padding: 0 2px;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #fff;
}

/* .el-icon-rank {
  font-size: 40px;
  cursor: pointer;
  margin-left: 10px;
} */

.el-header {
  border-bottom: 1px solid rgb(37, 57, 81) !important;
}
</style>

